<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input
          placeholder="项目名称"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="档案编号"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          class="search-sw"
          v-model="params.archives_no"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="负责人"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          class="search-sw"
          v-model="params.corp_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="资料状态"
          clearable
          class="search-sw"
          number-key
          :options="enumArchivesStatus"
          v-model="archivesStatus"
          @change="handleStatusChange()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-ab
          placeholder="资料收集人"
          clearable
          class="search-sw"
          v-model="abPerson"
          :table-name="tableName"
          @change="handleAbChange"
        ></select-ab>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:person="scope">
        <div>
          <span class="text-muted">A角：</span>
          {{ scope.row.res_a_name }}
        </div>
        <div>
          <span class="text-muted">B角：</span>
          {{ scope.row.res_b_name }}
        </div>
      </template>

      <template v-slot:attach="scope">
        <el-button
          v-if="scope.row.attachment_count > 0"
          type="text"
          class="py-0"
          @click="handleAttchClick(scope.row)"
        >
          {{ scope.row.attachment_count }}
        </el-button>
        <span v-else>-</span>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <archive-attach-dialog
      :visible.sync="attachVisible"
      :form-data="attachRow"
    ></archive-attach-dialog>

    <archive-dialog
      :visible.sync="archiveVisible"
      :form-data="archiveRow"
      :view-mode="viewMode"
      @success="handleArchiveSuccess"
    ></archive-dialog>

    <history-record-dialog
      :visible.sync="historyVisible"
      :history-id="historyId"
    ></history-record-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumArchivesStatus, enumArchivesStatusStyle } from '@/credit/views/city/archives/mixins'

import SelectAb from '@/credit/views/city/archives/SelectAb'
import ArchiveAttachDialog from '@/credit/views/city/archives/ArchiveAttachDialog'
import ArchiveDialog from '@/credit/views/city/archives/ArchiveDialog'
import HistoryRecordDialog from '@/credit/views/city/archives/HistoryRecordDialog'

export default {
  components: {
    SelectAb,
    ArchiveAttachDialog,
    ArchiveDialog,
    HistoryRecordDialog,
  },
  props: {},
  data() {
    return {
      enumArchivesStatus,

      loading: false,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        corp_name: '',
        archives_no: '',
        'orWhere.res_a.eq': '',
        'orWhere.res_b.eq': '',
      },
      abPerson: '',
      archivesStatus: '',

      order: {
        load_date: 'desc',
      },
      tableName: 'project_archives_view',
      tableColumns: [
        { attrs: { label: '项目名称', prop: 'customer_name', minWidth: '110px' } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '放款时间', prop: 'load_date', align: 'center', minWidth: 90 } },
        {
          attrs: { label: '档案编号', prop: 'archives_no', align: 'center' },
          process: v => v || '-',
        },
        {
          attrs: { label: '归档时间', prop: 'archives_time', align: 'center', minWidth: 90 },
          process: v => v || '-',
        },
        { attrs: { label: '资料收集人', prop: 'person', width: 120 }, slot: 'person' },
        {
          attrs: { label: '资料状态', prop: 'archiveStatusLabel', align: 'center' },
          process: (v, row) => ({ attrs: { class: `text-${row.archiveStatusStyle}` } }),
        },
        {
          attrs: { label: '档案柜号', prop: 'cabinet_no', align: 'center' },
          process: v => v || '-',
        },
        { attrs: { label: '附件数量', prop: 'attachment_count', align: 'center' }, slot: 'attach' },
        {
          attrs: { label: '操作', align: 'center', minWidth: '200px' },
          operations: [
            { name: '归档', event: this.handleArchive, ifRender: row => row.canArchive },
            { name: '修改', event: this.handleEdit, ifRender: row => row.canEdit },
            { name: '查看', event: this.handleView },
            { name: '记录', event: this.handleHistory, ifRender: row => row.archives_status > 0 },
          ],
        },
      ],
      tableData: [],
      tableCount: 0,

      // 附件查看
      attachVisible: false,
      attachRow: {},

      // 归档
      viewMode: true,
      archiveVisible: false,
      archiveRow: {},

      // 记录
      historyVisible: false,
      historyId: '',
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user']),
    isArchiveManager() {
      return this.user.scopeArr.includes('archiveM')
    },
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item.archives_status = +(item.archives_status || 0)
      item.archiveStatusLabel = enumArchivesStatus[item.archives_status]
      item.archiveStatusStyle = enumArchivesStatusStyle[item.archives_status]

      item.canArchive = this.isArchiveManager && item.archives_status === 0
      item.canEdit = this.isArchiveManager && item.archives_status >= 1

      item.attachment_count = +(item.attachment_count || 0)
      item.archives_time = (item.archives_time || '').substring(0, 10)

      return item
    },

    handleAbChange() {
      const { abPerson = '' } = this
      this.params['orWhere.res_a.eq'] = abPerson
      this.params['orWhere.res_b.eq'] = abPerson
      this.getData()
    },

    handleStatusChange() {
      switch (this.archivesStatus) {
        case 2:
          this.params['archives_status.eq'] = 2
          this.params['archives_status.is'] = ''
          break
        case 1:
          this.params['archives_status.eq'] = 1
          this.params['archives_status.is'] = ''
          break
        case 0:
          this.params['archives_status.eq'] = ''
          this.params['archives_status.is'] = 'null'
          break
        default:
          this.params['archives_status.eq'] = ''
          this.params['archives_status.is'] = ''
          break
      }
      this.getData()
    },

    handleAttchClick(row) {
      this.attachRow = row ? { ...row } : {}
      this.attachVisible = true
    },

    handleArchive(row) {
      this.viewMode = false
      this.archiveRow = row ? { ...row } : {}
      this.archiveVisible = true
    },

    handleEdit(row) {
      this.viewMode = false
      this.archiveRow = row ? { ...row } : {}
      this.archiveVisible = true
    },

    handleView(row) {
      this.viewMode = true
      this.archiveRow = row ? { ...row } : {}
      this.archiveVisible = true
    },

    handleHistory(row = {}) {
      this.historyId = row.project_archives_id || ''
      this.historyVisible = true
    },

    handleArchiveSuccess() {
      this.getData(this.params.index)
    },
  },
}
</script>

<style lang="scss" scoped>
.search-sw {
  width: 130px;
}
</style>
